<template>
	<s-layout :onShareAppMessage="state.shareInfo" title="活动分享" :bgStyle="{ color: '#f2f2f2' }">
		<view class="container">
			<view class="banner">
				<!-- 砍价活动的banner图片或文字 -->
				<image :src="state.imageUrl" mode="aspectFill"></image>
			</view>
			<!--   <view class="progress-container">
                <progress :percent="state.progressPercent" color="#ff0000"></progress>
            </view> -->
			<view class="content-box-time">

				<image class="content-box-time-img" :src="state.curAvatar" mode="aspectFill"></image>
				<view>
					<view class="list-name">{{ state.curNickName }}</view>
				</view>
			</view>
			<view class="button-container">
				
				<button style="background-color: #FFCCCC;color:#000"
				 bindtap="刷新" v-if="state.isMember==false" @click="refreshData()">点我刷新</button>
				
				
				<button style="background-color: #FFCCCC;color:#000"
					v-if="state.isMember && state.exites<=0 && state.isClick" bindtap="我要点赞"
					@click="updateinvitelog()">我要点赞</button>
				<!-- <button v-if="state.isMember" open-type="share" class="contentShare">分享</button> -->
				<button style="background-color: #FFCCCC;color:#000" v-if="state.exites>0 && state.isClick" bindtap="已点赞">已点赞</button>
			</view>

			<view class="text">

				<uni-collapse>
					<uni-collapse-item title="活动详情">
						<view class="collapse-box2" v-html="`${state.detail.content}`"></view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			
			<view class="text text-two">
			    <!-- <rich-text :nodes="state.detail.content"></rich-text> -->
			    <uni-collapse>
			        <uni-collapse-item title="参与城市">
			            <view class="collapse-box2">
			                <text class="city-name" v-for="(item,i) in state.city" :key="i">{{item}}</text>
			            </view>
			        </uni-collapse-item>
			    </uni-collapse>
			</view>



			<view class="price-container">
				<view v-for="(item, index) in state.items" :key="index">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view>
						<view class="list-name">{{ item.nickname }}</view>
						<view class="list-name">{{ item.created_at }}</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>
<script>
	var QQMapWX = require("../../static/qqmap-wx-jssdk.min");
	var qqmapsdk;
</script>

<script setup>
	import {
		baseUrl
	} from '@/sheep/config';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import _ from 'lodash';
	import data from '@/sheep/api/data';
	const state = reactive({
		city:[],
		data: {},
		selected: [], // 用于绑定选中的checkbox值
		loadStatus: '',
		total: 1,
		items: [],
		submit_btn: false,
		progressPercent: 50,
		detail: {},
		shareuserid: 0,
		shareeventid: 0,
		eventid: 0,
		curuserid: 0,
		imageUrl: '',
		shareInfo: {},
		isMember: false,
		exites: 0,
		curNickName: '',
		curAvatar: '',
		isClick: false,
		is_city:'1',
		shareData: {}
	});
	const imageUrl = ref('')
	const url = baseUrl.slice(0, baseUrl.lastIndexOf("index.php"))

	async function refreshData() {
		const eid = uni.getStorageSync('shareeventid') || 0;
		const shareuserid = uni.getStorageSync('shareuserid') || 0;
		state.data.shareuserid =shareuserid;
		state.data.shareeventid = eid;
		await addinvitelog();
		await getData(eid)
		//await sheep.$api.game.addinvitelog(4, 7);

	}
	
	async function getData(eventid) {
		uni.setStorageSync('shareeventid', eventid);
		uni.setStorageSync('shareuserid', state.data.shareuserid);
		let {
			code,
			data
		} = await sheep.$api.game.sharedetail(eventid, state.data.shareuserid);
		if (code) {
			 state.is_repeat = data.detail.is_repeat
			 state.is_city= data.detail.is_city
		  if( state.is_city=='1')
		  {
			if(data.detail.city!='')
			{				
				await getLocalCity(data.cityTxt)
			}else
			{
				state.isClick=false;
				uni.showModal({
					title: '提示',
					content: '您不在活动区域内',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {}
				});
			}
			}else
			{
				state.isClick=true
			}
			console.log(data)
			state.curuserid = data.curuserid
			state.items = data.sharelist
			state.detail = data.detail
			
			state.isMember = data.isMember
			state.exites = data.exites
			state.curNickName = data.curNickName
			state.curAvatar = data.curAvatar
			state.city = data.cityTxt
			if (state.data.shareuserid == 0 || state.data.shareuserid == undefined) {
				state.data.shareuserid = state.curuserid;
			}
			state.imageUrl = url + state.detail.image

			
		}
	}
	async function addinvitelog() {
		await sheep.$api.game.addinvitelog(state.data.shareuserid, state.data.shareeventid);
		//await sheep.$api.game.addinvitelog(4, 7);

	}
	async function updateinvitelog() {
		let {
			code,
			data
		} = await sheep.$api.game.updateinvitelog(state.data.shareeventid);
		console.log("code:"+code);
		console.log(data);
		if(code==-1)
		{
			// uni.showModal({
			// 	title: '提示',
			// 	content: data,
			// 	confirmText: '确定',
			// 	cancelText: '取消',
			// 	success: (res) => {}
			// });
		}
		else
		{
			uni.showToast( {
				title:'成功', 
				 duration:'点赞成功'
				});
state.exites=1;
			//getData(state.data.shareeventid);
			
		}
	}

	async function getLocalCity(cityTxt) {
		console.log(cityTxt)
		wx.getFuzzyLocation({
			type: 'wgs84',
			success(res) {
			
				//填入自己的key
				qqmapsdk = new QQMapWX({
						key: "EJQBZ-EFDRQ-P2C5J-GLP5J-WORHT-3ZBCN"
					}),
					this.latitude = res.latitude;
				this.longitude = res.longitude;
				//wx.getFuzzyLocation()方法获取的只是所在地区的经纬度，
				//获取所在地区的具体城市信息还需要进行逆地址解析
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: this.latitude,
						longitude: this.longitude
					},
					success: function(res) {
						console.log(cityTxt)
						let city = res.result.address_component.city
						console.log(cityTxt.includes(city))
						state.isClick = cityTxt.includes(city)
						if (state.isClick == false) {
							uni.showModal({
								title: '提示',
								content: '您不在活动区域内',
								confirmText: '确定',
								cancelText: '取消',
								success: (res) => {}
							});
						}
					},
					fail: function(err) {
						console.log(err);
					},
				})
			},
			fail(err) {
				console.error(err);
			}
		})
	}
	onLoad((option) => {
		state.data = option;
		state.data.shareuserid = option.shareuserid
		state.data.shareeventid = option.shareeventid
		state.eventid = option.eventid
console.log("option.eventid"+option.eventid);
		// uni.removeStorageSync('shareData');

		state.shareData = uni.getStorageSync('shareData') || {};
		if (Object.keys(state.shareData).length === 0) {			
			uni.setStorageSync('shareData', state.data);
		} else {
			// console.log("getStorageSync");
			if (option.shareeventid == undefined) {
				state.data.shareuserid = state.shareData.shareuserid
				state.data.shareeventid = state.shareData.shareeventid
			}
			
		}
		
		if (option.eventid == undefined) {
			option.eventid = option.shareeventid;
		}
		if (option.shareeventid == undefined) {
			option.shareeventid = option.eventid;
		}
		getData(option.eventid);
		
		addinvitelog();
		// getLocation()

	});
	onShow(() => {

	})
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.banner {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
		margin-top: 30rpx;
	}

	.banner>image {
		width: 690rpx;
		height: 300rpx
	}

	.text {
		width: 690rpx;
		margin-top: 160rpx;
		font-size: 30rpx;
		line-height: 36rpx;
	}

	.progress-container {
		width: 80%;
		height: 20rpx;
		background-color: #eaeaea;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 10px;

	}

	.content-box-time {
		color: #c1c1c1;
		font-size: 24rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx dashed #c1c1c1;
		display: flex;
		align-items: center;
	}

	.content-box-time-img {
		width: 90rpx;
		height: 90rpx;
		background-color: #eaeaea;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.content-curAvatar {
		width: 100rpx;
		height: 100rpx;
		background-color: #eaeaea;
		margin-right: 25rpx;
		border-radius: 10rpx;
	}

	.price-container {
		display: flex;
		flex-direction: column;
		margin-top: 100rpx;
		width: 750rpx;
		align-items: center;
	}

	.price-container>view {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 690rpx;
	}

	.price-container>view:nth-child(n+2) {
		margin-top: 15rpx
	}

	.price-container>view>image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 10rpx
	}

	.price-container>view>view {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.button-container {
		display: flex;
		/* 使用flex布局使按钮并排 */
		justify-content: space-between;
		margin-top: 50rpx;
		/* 分布按钮之间的空间 */
	}

	.button-container button {
		width: 320rpx;
		margin: 0;
		/* 移除默认的边距 */
		padding: 0 10rpx;
		outline: none;
		border-radius: 10rpx;

		/* 设置按钮的内边距 */

	}

	.button-container button:nth-child(1) {
		background-color: #008CBA;
		color: #fff;
	}

	.button-container button::after {
		display: none;
	}

	.button-container button:nth-child(2) {
		margin-left: 50rpx;
		background-color: green;
		color: #fff;
	}

	.collapse-box2 {
		padding: 10rpx 20rpx;
		line-height: 180%;
	}

	.button-btn {
		background-color: #FFCCCC;
	}
	
	
	.city-name {
	    margin-right: 20rpx;
	}
	
	.text-two {
		margin-top: 30rpx;
	}
</style>